<template>
	<view class="container">
		<map   :scale='size'  :markers='markers' @tap="add" id="ew" style="width: 100%; height: 92vh;" :longitude='longitude' :latitude='latitude' @markertap='f'></map>
		<!-- <view style="color: #F0FBFF;position: fixed;top: 0;left:0 ;width: 200px;height: 100px; background: rgba(0,0,0,0.2);">点击地图选择实际位置</view> -->
		<view class="option-fb"><view class="option-pt">
		<view class="c-gray6"><uni-icons type="map" color="#F44439" size="14" class="mr10"></uni-icons>点击地图，可调整为更准确的定位地点。</view>
		<button type="primary" @click="commit">确认位置</button>
		<view>
			<view class="map_size map_size_one" @click="addSize(1)">+</view>
			<view class="map_size" @click="addSize(-1)">-</view>
		</view>
		<!-- 超出福州时出现，尝试地图能否实现区域，不能则去掉这个判断
		<view class="c-gray9 tc">抱歉！当前位置已经超出我们的服务范围</view>
		-->
		</view>
		</view>
	</view>
	
</template>

<script>
	import map from '../../js/qqmap-wx-jssdk.min.js';
	var mapSdk ;
	export default {
		
		data(){
			return {
				longitude:'119.28',
				latitude:'26.08',
				size:17,
				markers:[
					{
						longitude:'119.28',
						latitude:'26.08',
						clickable:true
					}
				],
			}
		},
		onLoad(opt) {
			let This = this;
			uni.getLocation({
				success:function(res){
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2]; //上一个页面
					if(!prevPage.data.addSitesBool)
					{	
						This.longitude=res.longitude;
						This.latitude=res.latitude;
						This.markers=[{latitude:res.latitude,longitude:res.longitude}];
					}
				}
			});
			this.longitude = opt.x?opt.x:'119.28';
			this.latitude = opt.y?opt.y:'26.08';
			this.markers[0].longitude = opt.x?opt.x:'119.28';
			this.markers[0].latitude = opt.y?opt.y:'26.08';
			mapSdk = new map({
				key: 'DX7BZ-3BHKU-773V7-477VL-ZQSAE-GCFG3'
			});
		},
		methods:{
			addSize(e){
				if(this.size+e>=20)
				{
					this.size= 20;
					return ;
				}else if(this.size+e<=5)
				{
					this.size = 5;
					return ;
				}
				this.size+=e;
				console.log(this.size);
			},
			add(p){
				//console.log(p);
				this.markers=[p.detail];
			},
			commit(){
				let This = this;
				mapSdk.reverseGeocoder({
					location:this.markers[0],
					success: function (res) {
						if(res.status==0)
						{
							var pages = getCurrentPages();
							var prevPage = pages[pages.length - 2]; //上一个页面
							prevPage.setData({
							        addSites:res.result.address+' '+res.result.formatted_addresses.recommend,
									addSitesBool:true,
									x:This.markers[0].longitude,
									y:This.markers[0].latitude
							});
							uni.navigateBack();
						}
					},
					fail: function (res) {
						console.log(res);
					},
				});
			}
		}
	}
</script>
	
<style>
	
	.map_size{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px;
		height: 30px;
		font-size: 22px;
		background: #e2e2e2;
		position: fixed;
		top: 70vh;
		right: 20px;
	}
	.map_size_one{
		top: 65vh;
	}
</style>
